<template>
    <t-popup v-model="visible" placement="bottom" style="height: 70%;" :onClosed="closeDialog">
        <div class="dialogContainer">
            <div class="dialogTop">
                <div class="titleAndClose">
                    <p>Chọn ngân hàng</p>
                    <img src="@/assets/closeIcon.png" alt="" @click="closeDialog" />
                </div>
                <!-- <div class="searchArea" :style="searchAreaBorderStyle">
                    <img src="@/assets/searchIcon.png" alt="">
                    <input type="text" placeholder="Tìm kiếm ngân hàng" v-model="searchContent" name="" id=""
                        @focus="searchFocus" @blur="searchBlur" />
                </div> -->
            </div>
            <div class="otherBankList">
                <div v-for="(bank, index) in otherBankList" :key="index" class="bankItem"
                    :class="{ 'selectedOtherBank': bank.bkcode == currentSelectedBank?.bkcode }"
                    @click="clickBankHandler(bank)">
                    <div class="bankItemLeft">
                        <div class="bankName">{{ bank.bkname }}</div>
                        <template v-if="bank.hotFlag == '1'"><img class="hotFlag"
                                src="@/assets/hotIcon.png" /></template>
                    </div>
                    <div class="bankItemRight" v-if="bank.bkcode == currentSelectedBank?.bkcode">
                        <img src="@/assets/rightIcon.png" alt="">
                    </div>
                </div>

            </div>

            <div class="selectedBankBtnArea">
                <div class="selectedBankBtn" @click="clickConfirmHandler">Xác nhận</div>
            </div>
        </div>
    </t-popup>
</template>

<script setup lang='ts'>
import type { BankCardModel, BankInfoModel } from '@/api';
import { ref, defineProps, watch, defineEmits, watchEffect } from 'vue';

let props = defineProps(['visible', 'changeDialogStatus', 'otherBankList','selectedBank'])
let emits = defineEmits(['clickLightBankHandler'])


let searchContent = ref('')

let otherBankList = ref<BankInfoModel[]>([])

const initCurrentSelectedBank = ()=>({
    autoPopulation: '',
    bankProminenceIndex: '',
    bkcode: '',
    bkname: '',
    hotFlag: '',
    sort: '',
})

let currentSelectedBank = ref<BankInfoModel>(initCurrentSelectedBank())



let visible = ref(false)

const clickConfirmHandler = () => {
    if (currentSelectedBank.value?.bkcode) {
        emits('clickLightBankHandler', currentSelectedBank.value)
    }

    visible.value = false
}

const clickBankHandler = (bank: BankInfoModel) => {
    currentSelectedBank.value = bank
}

watch(() => props.visible, (newVal) => {
    visible.value = newVal
})
watch(() => props.otherBankList, (newVal) => {
    otherBankList.value = newVal
},{immediate:true})


watch([() => props.selectedBank,() => props.visible], ([newSelectedBank,newVisible]) => {
    currentSelectedBank.value = newSelectedBank
})


const closeDialog = () => {
    props.changeDialogStatus(false)
    currentSelectedBank.value = initCurrentSelectedBank()
}

</script>

<style lang="less" scoped>
.dialogContainer {
    height: 100%;
    /*padding: .8rem;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .selectedOtherBank {
        background-color: #E4F5EE;
    }

    .dialogTop {
        padding: .8rem;

        border-bottom: 1px solid #DCDCE0;

        .titleAndClose {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>p {
                /*font-family: SF Pro, SF Pro;*/
                font-weight: 600;
                font-size: .9rem;
                color: #292B33;
                line-height: 1.3rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            &>img {
                display: block;
                width: 1.2rem;
                height: 1.2rem;
            }
        }

        .searchArea {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #F7F7FA;
            padding: .5rem .6rem;
            margin-top: .85rem;
            border-radius: .2rem;
            border: 1px solid transparent;

            &>img {
                display: block;
                width: 1rem;
                height: 1rem;
                margin-right: .4rem;
            }
        }
    }

    .otherBankList {
        flex: 1;
        overflow-y: scroll;
        /*background-color: orange; */

        .bankItem {
            padding: .8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .bankItemLeft {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .bankName {
                    font-family: SF Pro, SF Pro;
                    font-weight: 400;
                    font-size: .8rem;
                    color: #292B33;
                    line-height: 1.2rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &>img {
                    display: block;
                    width: 2.4rem;
                    height: 1rem;
                    margin-left: .4rem;
                }
            }

            .bankItemRight {
                width: 1rem;
                height: 1rem;

                &>img {
                    display: block;
                    width: 100%;
                    height: 100%
                }
            }
        }

    }

    .selectedBankBtnArea {
        width: 100%;

        background: #FFFFFF;
        box-shadow: 0px -4px 24px 0px rgba(41, 41, 57, 0.08);
        border-radius: 8px 8px 0px 0px;
        padding: .5rem .8rem;

        .selectedBankBtn {
            background-color: #009959;
            border-radius: .3rem;
            padding: .55rem;
            font-family: SF Pro, SF Pro;
            font-weight: 600;
            font-size: .9rem;
            color: #FFFFFF;
            line-height: 1.3rem;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }
}
</style>